<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-11-25 08:07:39
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-01-06 16:45:10
 * @FilePath: /things-admin/src/view/questionnaire/questionnaire.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="header">
      <Button
        type="primary"
        style="margin: 0 20px 0 0"
        size="default"
        @click="showModal"
        >新增白名单
      </Button>
      <Space size="large" wrap>
        <Input  v-model="phones" style="width: 200px" placeholder="手机号"/>
      </Space>
      <Button
        type="primary"
        icon="ios-search"
        style="margin: 0 10px"
        size="default"
        @click="findInspect"
        >查询
      </Button>
      <Button
        icon="md-refresh"
        style="margin-right: 10px"
        size="default"
        @click="reset"
        >重置</Button
      >
    </div>
    <div class="body">
      <Table border :columns="columns" :data="data">
       
        <template #action="{ row, index }">
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="remvoeInspect(row.id)"
            >删除</Button
          >
        </template>
      </Table>
    </div>
    <Modal
      v-model="modalVisible"
      title="新增白名单"
      :mask-closable="false"
      @on-ok="handleOk"
      @on-cancel="handleCancel"
    >
      <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="80">
        <FormItem label="手机号：" prop="phone">
          <Input v-model="formItem.phone" placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem label="姓名：" prop="name">
          <Input v-model="formItem.name" placeholder="请输入姓名"></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal
        title="提示"
        v-model="isDelete"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>删除该白名单</p>
    </Modal>
  </div>
</template>

<script>
import {findInspectAll, addInspect, deleteId} from '@/base/api/InspectApi';
export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      // 添加手机号验证规则
      const phoneRegex = /^1[3|4|5|7|8][0-9]\d{8}$/;
      if (!phoneRegex.test(value)) {
        callback(new Error('请输入正确的手机号码'));
      } else {
        callback();
      }
    };
    return {
      modalVisible: false,
      isDelete: false,
      inspectId: 0,
      phones: "",
      formItem: {
        phone: '',
        name: '',
      }, 
      ruleValidate: {
        phone: [
          { required: true, validator: validatePhone, trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
      },
      columns: [
        {
          title: "ID",
          key: "id",
        },
        {
          title: "手机号",
          key: "phones",
        },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "创建时间",
          key: "created",
        },
        {
          title: "操作",
          slot: "action",
          width: 220,
          align: "center",
          fixed: "right",
        },
      ],
      data: [],
    };
  },
  mounted() {
    findInspectAll({phones: this.phones}).then((res) => {
      this.data = res.data
    });
  },
  methods: {
    findInspect() {
      findInspectAll({phones: this.phones})
      .then((res) => {
        this.data = res.data
      });
    },
    //重置
    reset() {
      this.phones = "";
      this.findInspect();
    },

    changeData(bool, data) {
      this.isShow = false;
    },

    addInspect(){
      addInspect({phones: this.formItem.phone})
      .then((res) => {
        console.log(this.formItem.phone);
        this.findInspect();
      });
    },
    
    remvoeInspect(id){
      this.inspectId = id;
      this.isDelete = true;
    },
    

    remvoeById(id){
      deleteId(id)
      .then((res) => {
        this.isDelete = false
        this.findInspect();
        this.$message.success('删除成功')
      });
    },

    ok(){
      this.remvoeById(this.inspectId)
    },

    cancel(){
      this.isDelete = false
    },

    showModal() {
      this.modalVisible = true;
    },
    handleOk() {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          addInspect({phones: this.formItem.phone})
            .then((res) => {
              console.log(this.formItem.phone);
              this.findInspect();
            });
          this.modalVisible = false;
          this.$refs['formItem'].resetFields();
        } else {
          console.log('error submit');
          return false;
        }
      });
    },
    handleCancel() {
      this.modalVisible = false;
      this.$refs['formItem'].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 66px;
  //   width: 500px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.body {
  margin-top: 20px;
}
</style>
